<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#fff0f5" circular="true">
			<swiper-item>
					<image src="../../static/1.png" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
					<image src="../../static/3.jpg" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
					<image src="../../static/4.jpg" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
					<image src="../../static/2.jpeg" mode="scaleToFill"></image>
					
			</swiper-item>
		</swiper>
	</view>
	
	
	<view class="">
		
		<image src="../../static/logo.png" mode="aspectFit" class="img"></image>
	</view>
	<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
</template>

<script setup>

</script>

<style lang="scss">
	swiper {
		width: 100vw;
		height: 200px;
		border: 1px solid red;
		box-sizing: border-box; //当设置width为100vw时，因为border边框还占据了1px,所以右侧边框会不显示，因此使用ie盒模型来设置

		swiper-item {
			width: 100%;
			height: 100%;
			// background: pink;

			&:nth-child(2n) {
				// background: yellow;
			}
			image{
				width: 100%;
				height: 100%;
			}
			
		}

	}
	
	.img{
		width: 150px;
		height: 150px;
	}
</style>